<template>
  <span v-for="slotItem in compatibleColumns" :key="slotItem.key">
    <div
      v-if="bodyCellScoped.column.key === slotItem.key"
      class="TypeColmun-cell"
      :class="getColumnCellStyleConfig( slotItem ).class"
      :style="getColumnCellStyleConfig( slotItem ).style"
      @mouseenter="cellMouseEnterHandle( slotItem , $event )"
      @mouseleave="cellMouseLeaveHandle( slotItem , $event )"
    >

      <!-- render  -->
      <TypeColumnRender
        v-if="slotItem.render"
        :data="data"
        v-bind="getCompatibleSlotScoped(bodyCellScoped)"
      />
      <!-- slotName -->
      <template v-else>
        <TypeColumnOfRadio
          v-if="slotItem.type ==='radio'"
          :body-cell-scoped="getCompatibleSlotScoped(bodyCellScoped)"
          :data="data"
        />
        <slot
          v-else
          :key="slotItem.slotName"
          :name="slotItem.slotName"
          v-bind="getCompatibleSlotScoped(bodyCellScoped)"
        >
          <!-- 普通列 -->
          <span class="TypeColmun-cell-text">{{
            getColumnValOfConfig(
              getCompatibleSlotScoped(bodyCellScoped)
            )
          }}</span>
        </slot>
      </template>
    </div>
    <CustomBody
      v-if="slotItem.children && slotItem.children.length"
      :compatible-columns="slotItem.children"
      :body-cell-scoped="bodyCellScoped"
      :get-compatible-slot-scoped="getCompatibleSlotScoped"
    />
  </span>
</template>
<script>
import TypeColumnRender from './TypeColumnRender'
import TypeColumnOfRadio from './TypeColumnOfRadio'
import CommonMixin from './CommonMixin'
export default {
  name: 'CustomBody',
  components: {
    TypeColumnRender,
    TypeColumnOfRadio
  },
  mixins: [CommonMixin],
  inject: ['busEvent'],
  props: {
    compatibleColumns: Array,
    bodyCellScoped: [Function, Object],
    data: Array
  },
  methods: {
    // row cell  鼠标移入事件
    cellMouseEnterHandle(columnConfig, event) {
      // 暴露事件
      this.busEvent.value.emit('cell-content-mouse-enter', { event, columnConfig })
    },
    // row cell  鼠标移处事件
    cellMouseLeaveHandle(columnConfig, event) {
      // 暴露事件
      this.busEvent.value.emit('cell-content-mouse-leave', { event, columnConfig })
    },
    // 获取 column style 配置
    getColumnCellStyleConfig(colConfig) {
      const config = {
        style: '',
        class: ''
      }
      const typeColumConfig = colConfig
      if (typeColumConfig.isLeafColumn) {
        Object.assign(config, {
          class: [
            typeColumConfig.headerNotic && 'TypeColmun-body-notic',
            typeColumConfig.sortable && 'TypeColmun-body-sortable',
            typeColumConfig.lineClamp >= 2 && 'TypeColmun-line-clamp',
            typeColumConfig.lineClamp === 1 && 'TypeColmun-line-clamp-one',
            typeColumConfig.align
              ? 'TypeColmun-align-' + typeColumConfig.align
              : 'TypeColmun-align-left'
          ],
          style: {
            '-webkit-line-clamp':
              typeColumConfig.lineClamp >= 2 ? typeColumConfig.lineClamp : ''
          }
        })
      }
      return config
    }
  }
}
</script>
<style lang='scss' scoped>

// 针对右对齐cell  进行定位偏移
.TypeColmun-align-right {
  // 有提示的
  &.TypeColmun-body-notic {
    margin-right: 18px;
  }
  // 有排序的
  &.TypeColmun-body-sortable {
    margin-right: 0px;
  }
  // 有排序有提示的情况
  &.TypeColmun-body-sortable.TypeColmun-body-notic {
    margin-right: calc( 18px);
  }
}

.TypeColmun-line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.TypeColmun-line-clamp-one {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
